<template>
  <div class="interface">
    <!-- 树结构 -->
    <interface-tree />
    <div class="interface_right">
      <!-- 搜索 -->
      <interface-search />
      <!-- 列表 -->
      <interface-list />
    </div>
  </div>
  <!-- 详情弹窗 -->
  <a-modal v-model:visible="dislog.details" destroy-on-close :body-style="bodystyle" :width="1000" style="text-align: center" title="接口详情" :footer="null">
    <interface-detail />
  </a-modal>
  <!-- 批量分类弹窗 -->
  <batch-classification />
  <!-- 接口测试弹窗 -->
  <a-modal v-model:visible="dislog.test" destroy-on-close width="70%" title="接口测试" style="text-align: center" :footer="null">
    <interface-test />
  </a-modal>
</template>

<script lang="ts" setup>
  import InterfaceTree from './components/InterfaceTree.vue';
  import InterfaceList from './components/interfaceList.vue';
  import InterfaceSearch from './components/interfaceSearch.vue';
  import InterfaceDetail from './components/interfaceDetail.vue';
  import BatchClassification from './components/batchClassification.vue';
  import { getInterfaceManagementHook } from '@/hooks/InterfaceManagementHooks/getInterfaceManagementHooks';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  import InterfaceTest from './components/interfaceTest.vue';

  // 引入hooks
  const { dislog } = getInterfaceDetailsHooks();
  const { getList } = getInterfaceManagementHook();
  // 控制详情弹窗高度
  const bodystyle = {
    height: '500px',
    overflow: 'hidden',
    overflowY: 'scroll',
  };
  // 查询list
  getList();
</script>

<style lang="less" scoped>
  .interface {
    display: flex;
    justify-content: space-between;
    height: 100%;

    .interface_right {
      //   box-shadow: 0px 0px 20px 2px #b4b1b2;
      width: 78%;
    }

    :deep(.ant-modal-content) {
      min-width: 1000px;
    }
  }
</style>
